<template>
	<view class="personal-data">
		<view class="wrapper">
			<view class="wrapList">
				<view class="item acea-row row-between-wrapper on">
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue" @tap="chooseImage">
							<div class="pictrue" v-if="avatar != ''"><img :src="avatar" /></div>
							<div class="pictrue" v-else><open-data type="userAvatarUrl"></open-data></div>
							<image src="http://mall-image.hxyrfwpt.com/static/images/alter.png" class="alter" />
						</view>
						<view class="text">
							<view class="name line1">
								<!-- {{ userInfo.nickname }} -->
								<open-data type="userNickName"></open-data>
							</view>
							<view class="phone">
								绑定手机号：
								<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
								<text v-else>未绑定</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item acea-row row-between-wrapper">
				<view>姓名</view>
				<view class="input"><input type="text" v-model="userInfo.nickname" /></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>性别</view>
				<view class="input"><input type="text" v-model="gender" placeholder="请输入性别" /></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>身份证号</view>
				<view class="input"><input type="text" v-model="identity" placeholder="请输入身份证号" /></view>
			</view>
			<!--  <view class="item acea-row row-between-wrapper">
        <view>ID号</view>
        <view class="input acea-row row-between-wrapper">
          <input type="text" :value="userInfo.uid" disabled class="id" />
          <text class="iconfont icon-suozi"></text>
        </view>
      </view> -->
			<view class="item2 acea-row row-between-wrapper">
				<view>手机号</view>
				<view class="input">
					<input type="text" v-if="userInfo.phone" v-model="userInfo.phone" />
					<input type="text" v-else value="未绑定" disabled class="id" />
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>区域</view>
				<view class="input"><input type="text" v-model="area" placeholder="请输入区域" /></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>所属公司</view>
				<view class="input"><input type="text" v-model="company" placeholder="所属公司" /></view>
			</view>
			<!-- 
        <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
          <view>密码</view>
          <view class="input acea-row row-between-wrapper">
            <text>点击修改密码</text>
            <text class="iconfont icon-suozi"></text>
          </view>
        </view>
      -->
		</view>
		<view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="logOut cart-color acea-row row-center-wrapper" @click="logout">退出登录</view>
		<!-- #endif -->
	</view>
</template>
<script>
import { mapGetters } from 'vuex';
import { trim, isWeixin, chooseImage } from '@/utils';
import { VUE_APP_API_URL } from '@/config';
import { postUserEdit, getLogout, switchH5Login, getUserInfo } from '@/api/user';
import cookie from '@/utils/store/cookie';
import store from '@//store';
import dayjs from 'dayjs';

export default {
	name: 'PersonalData',
	components: {
		// VueCoreImageUpload
	},
	data: function() {
		return {
			avatar: '',
			isWeixin: false,
			currentAccounts: 0,
			switchUserInfo: [],
			userIndex: 0,
			gender: '',
			identity: '',
			area: '',
			company: ''
		};
	},
	computed: mapGetters(['userInfo']),
	mounted: function() {
		this.avatar = this.userInfo.avatar;
		this.isWeixin = isWeixin();
		this.getUserInfo();
	},
	methods: {
		goChangePassword() {
			this.$yrouter.push('/pages/user/ChangePassword/index');
		},
		switchAccounts: function(index) {
			let that = this;
			this.userIndex = index;
			let userInfo = this.switchUserInfo[this.userIndex];
			if (this.switchUserInfo.length <= 1) return true;
			if (userInfo === undefined) {
				uni.showToast({
					title: '切换的账号不存在',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (userInfo.user_type === 'h5') {
				switchH5Login()
					.then(({ data }) => {
						uni.hideLoading();
						const expires_time = dayjs(data.expires_time);
						store.commit('login', data.token, expires_time);
						that.$emit('changeswitch', false);
						location.reload();
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					});
			} else {
				cookie.set('loginType', 'wechat', 60);
				uni.hideLoading();
				this.$store.commit('logout');
				this.$emit('changeswitch', false);
			}
		},
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
				// let switchUserInfo = res.data.switchUserInfo;
				// for (let i = 0; i < switchUserInfo.length; i++) {
				//   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
				//   if (
				//     !that.isWeixin &&
				//     switchUserInfo[i].user_type != "h5" &&
				//     switchUserInfo[i].phone === ""
				//   )
				//     switchUserInfo.splice(i, 1);
				// }
				// that.$set(this, "switchUserInfo", switchUserInfo);
			});
		},
		chooseImage() {
			chooseImage(img => {
				console.log(img);
				this.avatar = img;
			});
		},

		submit: function() {
			let userInfo = this.userInfo;
			postUserEdit({
				nickname: this.userInfo.nickname,
				avatar: this.avatar
			}).then(
				res => {
					this.$store.dispatch('userInfo', true);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					this.$yrouter.back();
				},
				err => {
					uni.showToast({
						title: err.msg || err.response.data.msg || err.response.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			);
		},
		logout: function() {
			uni.showModal({
				title: '提示',
				content: '确认退出登录?',
				success: res => {
					if (res.confirm) {
						getLogout()
							.then(res => {
								this.$store.commit('logout');
								this.$yrouter.replace({
									path: '/pages/user/Login/index',
									query: {}
								});
							})
							.catch(err => {});
					} else if (res.cancel) {
						// console.log("用户点击取消");
					}
				}
			});
		}
	}
};
</script>
